<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="百领学院"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <div class="nav-box">
            <span
                class="nav-item"
                @click="goImgManager"
            >海报</span>
            <span class="nav-item active">文案</span>
        </div>

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div>
                <div class="word-source-list">
                    <div
                        class="source-item"
                        v-for="(item,index) of wordSource"
                        :key="index"
                        @click="goWordSource(item.sourceId)"
                    >
                        <div class="source-lable">{{item.sourceName}}</div>
                        <div class="source-word">{{item.sourceDetail}}</div>
                        <div class="more">更多 ></div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 共用底部导航栏 -->
        <!-- <common-footer nowPage="1"></common-footer> -->
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'ImgManager',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter
    },
    data() {
        return {
            scrollStyle: {
                top: '2.17rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            wordSource: [
                {
                    sourceId: 3,
                    sourceName: '商城推广',
                    sourceDetail:
                        '精致的妆容就像是女人的盔甲，能让女人在任何场合都气定神闲。你是你人生中唯一的女主角，与其讨好世界，不如取悦自己，我们无法美成奥黛丽赫本的样子，但是可以成为最美的自己。往后岁月，百领好货与你相伴，愿你岁月无痕迹，敬你余生不卑微，做个精致女人，实现关于美的所有遐想。'
                },
                {
                    sourceId: 4,
                    sourceName: '产品推广',
                    sourceDetail:
                        '从护肤、彩妆、洗护到香氛等全系列的至臻筛选，全方位抗老，带来持续的容颜焕发，才算得上是对百领会员的真正宠爱。细心呵护每一寸肌肤，以极致出彩演绎时尚魅力的个性态度，让每一款产品都能谱写你的惊艳传奇！这就是百领产品上线的价值，也是我们的期许。'
                },
                {
                    sourceId: 5,
                    sourceName: '用户晒图',
                    sourceDetail:
                        '百领在成长的过程中，有太多的故事要分享了。我们认为只有沉浸在用户中，知道用户在说什么，在想什么，才能真正知道用户的真实想法，才能把握用户的需求，做出用户喜欢的东西。我们一直这么做，从来也不敢怠慢。'
                },
                {
                    sourceId: 6,
                    sourceName: '价格对比',
                    sourceDetail:
                        '百领致力于为广大会员提供物美价廉的产品和优质的服务，让用户花最少的钱得到最好的产品，以此来换取用户最大的满意度，为用户打造一个无忧的一站式美妆购物平台，这也是百领好货创造的最大价值。'
                }
            ]
        }
    },
    methods: {
        goImgManager() {
            this.$router.push('/imgManager')
        },
        goWordSource(id) {
            this.$router.push({
                path: '/wordSource',
                query: {
                    wordType: id
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.nav-box
    display flex
    justify-content space-between
    height 1.06rem
    padding 0 2.21rem
    background #fff
    .nav-item
        height 1.06rem
        line-height 1.06rem
        font-size 0.37rem
        color 333
        box-sizing border-box
    .active
        color #d7463c
        border-bottom 2px solid #d7463c
.adv-box
    padding 0.16rem 0
    .adv-img
        width 100%
.word-source-list
    padding 0.18rem
    .source-item
        position relative
        padding 0.85rem 0.27rem 0 0.27rem
        background #fff
        border-radius 6px
        margin-bottom 0.18rem
        .source-lable
            position absolute
            top 0.18rem
            left 0
            width 1.6rem
            line-height 0.53rem
            text-align center
            font-size 0.32rem
            color #fff
            background #d7463c
            border-radius 0 15px 15px 0
        .source-word
            font-size 0.29rem
            color #999
            line-height 1.5
        .more
            line-height 0.67rem
            text-align right
            font-size 0.29rem
            color #999
</style>
